<template>
  <div id="option">
    <!--    筛选事件-->
    <el-input
      class="search"
      placeholder="筛选事件..."
      prefix-icon="el-icon-search"
        @input="filters"
      v-model="search"
    >
    </el-input>
    <!--    标签选择-->
    <div class="wrap">
    <el-collapse v-model="activeNames" @change="handleChange" class="choWrap">
      <el-collapse-item title="标签选择" name="1" class="cholist">
        <div class="chounit" v-for="(mes,index) in arr" :key="'group'+index">
          <div class="cir">
            {{ mes.value }}
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
    <!--    APP元素点击-->
    <div class="list-wrap">
        <div class="list" v-for="(mes,index) in dataTable" :key="'detail'+index" @click="choList(mes)" :class="{'act':mes.id==choL.id}">
        <div class="cir"></div>
        {{ mes.cname }}
      </div>
    </div>
  </div>

  </div>
</template>

<script>
import { thinglList } from "./api.config";

export default {
  name: "options",
  props: ["origin"],
  data() {
    return {
      search: "",
      activeNames: ['1'],
      arr: [],
      dataTable: [],
      choL:{},
      dataOrigin:[]
    }
  },
  created() {
    let params = {
      req: {
        appId: JSON.parse(window.sessionStorage.getItem('appItem')).appId
      },
      operationCtx: {}
    };
    thinglList(params).then((res)=>{
      // 返回状态码如果不是 200，说明数据异常，需弹窗提示
      if (res.data.success !== true) {
        t.$message.error(res.data.errorMessage);
        return;
      }

      this.dataOrigin = res.data.value.list;
      this.dataTable = res.data.value.list;
      console.log(res);
    })
  },
  methods: {
    filters(){
      if(this.search){
        var arr=this.dataOrigin.filter(item => {
          return item.cname.indexOf(this.search)>0
        })
        this.dataTable=arr;
      }else{
        this.dataTable=this.dataOrigin;
      }

    },
    handleChange() {},
    choList(mes) {
      this.choL = mes;
        this.$emit("cho", {mes:mes,origin:this.origin})
    }
  },
  mounted() {
    console.log(this.origin)

  }
}
</script>

<style lang="scss">
#option {
  width: 100%;
  height: 400px;
  background-color: #fff;
  border: 1px solid #ccc;
  position: absolute;
  left: -1px;
  top: 100%;
  z-index: 99;
  display: flex;
  flex-direction: column; //纵向排列
  .search {
    position: relative;
    top: 0px;
    left: -6px;
    transition: background .2s ease-in-out, box-shadow .2s ease-in-out;
    color: #333;
    height: 30px;
    &:hover{
      box-shadow: none;
    }
    .el-input__inner {
      border: none;
      outline: none;
      border-radius: 0;
      width: 94%;
    }
  }
  .wrap{
    height: auto;
    overflow-y: scroll; //滚动条
    z-index: 100;
    position: relative;
    width: 100%;
  }

  .choWrap {
    text-indent: 20px;
    width: 100%;
    margin-top: 10px;
    .el-collapse-item__content {
      padding-bottom: 0;
    }

    .chounit {
      height: 30px;
      line-height: 30px;
      display: flex;
      align-items: center;
      padding-left: 10px;

      //圆点
      .cir {
        width: 8px;
        height: 8px;
        background-color: #91bbed;
        border-radius: 20px;
        margin-right: 10px;
      }
    }

    .el-collapse-item__header {
      height: 30px;
    }
  }

  .list-wrap {
    .list {
      color: #333;
      padding-left: 20px;
      line-height: 30px;
    }
    .act {
      background-color: green;
      color: white;
    }
  }
}
</style>
